<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    .yizhu_detail {
        width: 94%;
        padding: 0.8rem 3%;
        height: 6rem;
        background-color: #fff;
        font-size: 0.8rem;
        outline: none;
        border-bottom: 1px solid #e8e8e8;
    }

    .nums {
        font-size: 0.6rem;
        color: #565656;
        position: absolute;
        right: 0.8rem;
        top: 7rem;
    }

    .nums span {
        color: #2780e8;
    }

    .padding {
        padding: 1rem 0.8rem;
        background-color: #fff;
    }

    .padding .title {
        color: #565656;
        font-size: 0.7rem;
        padding-bottom: 0.5rem;
    }

    .padding .title .img_nums {
        color: #838383;
        font-size: 0.6rem;
        float: right;
    }

    .imgs_div {
        width: 100%;
        background-color: #fff;
    }

    .imgs_div img {
        width: 3rem;
        height: 3rem;
        margin-right: 0.5rem;
    }

    .imgs_div img:last-child {
        margin: 0;
    }

    .youxiang {
        background-color: #fff;
        height: 2.5rem;
        width: 100%;
        line-height: 2.5rem;
    }

    .youxiang span {
        width: 15%;
        text-align: right;
        color: #565656;
        font-size: 0.7rem;
    }

    .youxiang input {
        width: 82%;
        padding-left: 3%;
        float: right;
        height: 100%;
        font-size: 0.7rem;
    }

    .save {
        width: 90%;
        height: 2rem;
        margin: 1rem 5%;
        text-align: center;
        line-height: 2rem;
        background-color: #2780e8;
        color: #fff;
        font-size: 0.7rem;
        border-radius: 0.3rem;
    }
</style>

<body>
    <div  id="app" v-cloak>
        <div class="placeholder_div"></div>
        <p class="nums"><span>{{yizhu_detail_length}}</span>/ 500</p>
        <textarea class="yizhu_detail" v-model="yizhu_detail" maxlength="500" placeholder="请描述您遇到的问题或建议～～"></textarea>
        <div class="placeholder_div"></div>

        <div class="padding">
            <p class="title">附图（选填）
                <span class="img_nums">{{imgsArr.length}}/4</span>
            </p>
            <div class="imgs_div">
                <img :src="item" alt="" v-for="(item,index) in imgsArr" style="border: 1px solid #e8e8e8;"
                    @click="look(index)">
                <img v-if="imgsArr.length < 4" src="../image/icon_camera.png" onclick="uploadimg(this)" alt="">
            </div>
        </div>

        <div class="placeholder_div"></div>

        <div class="youxiang">
            <span>邮箱：</span>
            <input type="text" placeholder="选填，方便我们联系到您" v-model="email">
        </div>
        <div class="save" onclick="save()">提交</div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            yizhu_detail: "",
            email: "",
            yizhu_detail_length: 0,
            imgsArr: [], // 上传的图片数组
        },
        methods: {
            look: function (img_index) {
                var UIPhotoViewer = api.require('UIPhotoViewer');
                UIPhotoViewer.open({
                    images: app.imgsArr,
                    placeholderImg: 'widget://res/logo.png',
                    bgColor: '#000',
                    activeIndex: img_index,
                }, function (ret, err) {
                    if (ret) {
                        // alert(JSON.stringify(ret));
                        if (ret.eventType == 'show') {
                            toast("再次点击即可退出")
                        }
                        if (ret.eventType == 'click') {
                            UIPhotoViewer.close();
                        }
                    } else {
                        alert("网络不通畅，请稍后再试！");
                    }
                });
            }
        },
        watch: {
            // 医嘱字数
            yizhu_detail: function (val) {
                this.yizhu_detail_length = val.length
            }
        },

    })


    // 上传图片
    function uploadimg(obj) {
        api.actionSheet({
            title: '请选择方式',
            cancelTitle: '取消',
            buttons: ['相册', '拍照']
        }, function (ret, err) {
            var index = ret.buttonIndex;
            switch (index) {
                case 1:
                var trs = isJuris('photos', '需要获取您的相机权限，才能上传照片，请问是否同意？'); //相机权限
                if(!trs){
                  toast("获取相机权限失败")
                  return;
                }
                    var resultList = api.hasPermission({
                        list: ['photos']
                    });
                    api.requestPermission({
                        list: ['photos'],
                        code: 1
                    }, function (ret, err) {
                        if (ret) {
                            var UIAlbumBrowser = api.require('UIAlbumBrowser');
                            if (api.systemType == 'ios') {
                                UIAlbumBrowser.imagePicker({
                                    max: 4,
                                    showCamera: false,
                                    styles: {
                                        bg: '#FFFFFF',
                                        cameraImg: 'widget://res/cameraImg.png',
                                        mark: {
                                            icon: '',
                                            position: 'bottom_left',
                                            size: 20
                                        },
                                        nav: {
                                            bg: 'rgba(0,0,0,0.6)',
                                            cancelColor: '#1883FE',
                                            cancelSize: 16,
                                            nextStepColor: '#1883FE',
                                            nextStepSize: 16
                                        }
                                    },
                                    isSystemCamera: false,
                                    animation: true,
                                }, function (ret) {
                                    // alert(JSON.stringify(ret))
                                    if (ret.eventType == 'nextStep') {
                                        // var UIAlbumBrowser = api.require('UIAlbumBrowser');
                                        UIAlbumBrowser.closePicker();
                                        if (ret.list != null && ret.list != "") {
                                            for (var i = 0; i < ret.list.length; i++) {
                                                // vm.imgs.push(ret.list[i].thumbPath);
                                                fnTransPath(ret.list[i].path, ret.list.length);

                                            }
                                            // UIAlbumBrowser模块的 transPath方法，用于iOS手机上
                                            function fnTransPath(path, imglength) {
                                                var UIAlbumBrowser = api.require(
                                                    'UIAlbumBrowser');
                                                UIAlbumBrowser.transPath({
                                                    path: path //要转换的图片路径（在相册库的绝对路径）
                                                }, function (ret, err) {
                                                    if (ret) {
                                                        //alert(JSON.stringify(ret));
                                                        // console.log(ret.path+"==ios");
                                                        // $api.attr($api.byId('imgUp'), 'src', ret.path);
                                                        ajax_upimg(ret.path);
                                                        //return ret.path;
                                                    } else {
                                                        alert("网络不通畅，请稍后再试！");
                                                    }
                                                });
                                            }
                                        }
                                    }
                                });
                            } else { //安卓
                                UIAlbumBrowser.imagePicker({
                                    max: 4,
                                    showCamera: false,
                                    styles: {
                                        bg: '#FFFFFF',
                                        cameraImg: 'widget://res/cameraImg.png',
                                        mark: {
                                            icon: '',
                                            position: 'bottom_left',
                                            size: 20
                                        },
                                        nav: {
                                            bg: 'rgba(0,0,0,0.6)',
                                            cancelColor: '#1883FE',
                                            cancelSize: 16,
                                            nextStepColor: '#1883FE',
                                            nextStepSize: 16
                                        }
                                    },
                                    isSystemCamera: false,
                                    animation: true,
                                }, function (ret) {
                                    // alert(JSON.stringify(ret))
                                    if (ret.eventType == 'nextStep') {
                                        // var UIAlbumBrowser = api.require('UIAlbumBrowser');
                                        UIAlbumBrowser.closePicker();
                                        // alert(JSON.stringify(ret))
                                        for (var i = 0; i < ret.list.length; i++) {
                                            if (ret.list[i].size > 5 * 1000 * 1000) {
                                                toast("第" + (i + 1) + "张图片过大")
                                                return
                                            } else {
                                                ajax_upimg(ret.list[i].path)
                                            }
                                        }

                                    }
                                });
                            };
                        }
                    })
                    break;

                case 2:
                    //打开拍照
                    var trs = isJuris('camera', '需要获取您的相机权限，才能上传照片，请问是否同意？'); //相机权限
                    if(!trs){
                      toast("获取相机权限失败")
                      return;
                    }
                    var resultList = api.hasPermission({
                        list: ['camera'],
                    });
                    api.requestPermission({
                        list: ['camera'],
                        code: 1
                    }, function (ret, err) {
                        if (ret) {
                            api.getPicture({
                                sourceType: 'camera',
                                encodingType: 'jpg',
                                mediaValue: 'pic',
                                targetWidth: '780',
                                targetHeight: '1040',
                                destinationType: 'url',
                                quality: 70,
                                saveToPhotoAlbum: false
                            }, function (ret, err) {
                                if (ret && ret.data) {
                                    //返回的本地路径
                                    var returnUrl = ret.data;
                                    // app.imgsArr.push(returnUrl)
                                    ajax_upimg(returnUrl)
                                } else {
                                    //alert("网络不通畅，请稍后再试！");
                                }
                            });
                        }
                    })
                    break;
            }
        });
    }

    //执行ajax上传图片数组
    function ajax_upimg(returnUrl) {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '',
            text: '请稍等...',
            modal: true
        });
        // alert(returnUrl)
        api.ajax({
            url: "https://api.zetikeji.com/api/storage/file",
            method: 'post',
            data: {
                values: {
                    name: 'haha'
                },
                files: {
                    file: returnUrl
                }
            }
        }, function (ret, err) {
            if (ret) {
                var item = "https://oss.zetikeji.com/" + ret.data
                app.imgsArr.push(item)
            } else {
                api.alert({
                    msg: JSON.stringify(err)
                });
            }
            api.hideProgress();
        });
    }


    function save() {
        post_ajax("portal/feedback/save", {
            userId: $api.getStorage("emp").userId,
            msg: app.yizhu_detail,
            images: app.imgsArr,
            email: app.email,
        }, function (res, err) {
            if (res) {
                // alert("网络不通畅，请稍后再试！")
                api.closeWin()
            } else {
                // alert(JSON.stringify(err.msg))
            }
        })
    }
</script>
